<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中文DOM操作测试页面</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f5f5f5;
      padding: 20px;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2c3e50;
      margin-bottom: 30px;
      text-align: center;
      padding-bottom: 15px;
      border-bottom: 2px solid #3498db;
    }
    
    h2 {
      color: #34495e;
      margin: 30px 0 20px;
      padding-left: 15px;
      border-left: 4px solid #3498db;
    }
    
    h3 {
      color: #7f8c8d;
      margin: 20px 0 15px;
    }
    
    .section {
      margin-bottom: 40px;
      padding: 20px;
      background-color: #f9f9f9;
      border-radius: 6px;
    }
    
    .demo-area {
      background-color: #ecf0f1;
      padding: 20px;
      margin: 15px 0;
      border-radius: 6px;
      min-height: 100px;
    }
    
    .test-element {
      background-color: #e74c3c;
      color: white;
      padding: 10px;
      margin: 5px;
      border-radius: 4px;
      display: inline-block;
    }
    
    .test-element.blue {
      background-color: #3498db;
    }
    
    .test-element.green {
      background-color: #2ecc71;
    }
    
    .test-element.yellow {
      background-color: #f39c12;
    }
    
    .test-element.hidden {
      display: none;
    }
    
    .info-box {
      background-color: #e3f2fd;
      padding: 15px;
      border-radius: 6px;
      margin: 15px 0;
      border-left: 4px solid #2196f3;
    }
    
    .result-box {
      background-color: #f1f8e9;
      padding: 15px;
      border-radius: 6px;
      margin: 10px 0;
      font-family: monospace;
      white-space: pre-wrap;
      word-break: break-all;
    }
    
    button {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 10px 20px;
      margin: 5px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s;
    }
    
    button:hover {
      background-color: #2980b9;
    }
    
    button:active {
      transform: translateY(1px);
    }
    
    .btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 15px 0;
    }
    
    input[type="text"] {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100%;
      max-width: 300px;
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin: 20px 0;
    }
    
    .code-block {
      background-color: #2c3e50;
      color: #ecf0f1;
      padding: 15px;
      border-radius: 6px;
      font-family: 'Courier New', Courier, monospace;
      font-size: 14px;
      overflow-x: auto;
    }
    
    .highlight {
      background-color: #fff3cd;
      padding: 2px 4px;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>中文DOM操作测试页面</h1>
    
    <div class="info-box">
      <strong>说明：</strong>本页面展示了使用 <code>zh-dom.js</code> 封装的中文DOM操作方法。点击各个按钮可以测试不同的DOM操作功能。
    </div>
    
    <!-- 基本选择器操作 -->
    <div class="section">
      <h2>1. 基本选择器操作</h2>
      <div class="demo-area" id="basic-selector-area">
        <div class="test-element">元素 1</div>
        <div class="test-element blue">元素 2</div>
        <div class="test-element green">元素 3</div>
      </div>
      <div class="btn-group">
        <button onclick="testBasicSelector()">测试基本选择器</button>
        <button onclick="testFindAll()">测试查找所有元素</button>
      </div>
      <div class="result-box" id="selector-result"></div>
    </div>
    
    <!-- 元素创建 -->
    <div class="section">
      <h2>2. 元素创建与添加</h2>
      <div class="demo-area" id="element-creation-area">
        <!-- 新元素将在这里添加 -->
      </div>
      <div class="btn-group">
        <button onclick="createNewElement()">创建新元素</button>
        <button onclick="addChildElement()">添加子元素</button>
        <button onclick="insertBeforeElement()">在前面插入元素</button>
      </div>
      <div class="result-box" id="creation-result"></div>
    </div>
    
    <!-- 类操作 -->
    <div class="section">
      <h2>3. 类操作</h2>
      <div class="demo-area">
        <div class="test-element" id="class-test-element">点击下方按钮改变我的类</div>
      </div>
      <div class="btn-group">
        <button onclick="addClassTest()">添加类</button>
        <button onclick="removeClassTest()">删除类</button>
        <button onclick="toggleClassTest()">切换类</button>
        <button onclick="checkClassTest()">检查类</button>
      </div>
      <div class="result-box" id="class-result"></div>
    </div>
    
    <!-- 内容操作 -->
    <div class="section">
      <h2>4. 内容操作</h2>
      <div class="demo-area">
        <div class="test-element" id="content-test-element">原始内容</div>
        <input type="text" id="content-input" placeholder="输入要设置的内容">
      </div>
      <div class="btn-group">
        <button onclick="setTextContent()">设置文本内容</button>
        <button onclick="getTextContent()">获取文本内容</button>
        <button onclick="setHTMLContent()">设置HTML内容</button>
        <button onclick="getHTMLContent()">获取HTML内容</button>
      </div>
      <div class="result-box" id="content-result"></div>
    </div>
    
    <!-- 属性操作 -->
    <div class="section">
      <h2>5. 属性操作</h2>
      <div class="demo-area">
        <div class="test-element" id="attribute-test-element" data-test="原始值">属性测试元素</div>
      </div>
      <div class="btn-group">
        <button onclick="setAttributeTest()">设置属性</button>
        <button onclick="getAttributeTest()">获取属性</button>
        <button onclick="removeAttributeTest()">删除属性</button>
        <button onclick="hasAttributeTest()">检查属性</button>
        <button onclick="setMultipleAttributes()">设置多个属性</button>
      </div>
      <div class="result-box" id="attribute-result"></div>
    </div>
    
    <!-- 样式操作 -->
    <div class="section">
      <h2>6. 样式操作</h2>
      <div class="demo-area">
        <div class="test-element" id="style-test-element">样式测试元素</div>
      </div>
      <div class="btn-group">
        <button onclick="setStyleTest()">设置样式</button>
        <button onclick="setMultipleStyles()">设置多个样式</button>
        <button onclick="getStyleTest()">获取样式</button>
      </div>
      <div class="result-box" id="style-result"></div>
    </div>
    
    <!-- 事件操作 -->
    <div class="section">
      <h2>7. 事件操作</h2>
      <div class="demo-area">
        <div class="test-element" id="event-test-element">点击我触发事件</div>
      </div>
      <div class="btn-group">
        <button onclick="addEventListenerTest()">添加事件监听</button>
        <button onclick="removeEventListenerTest()">移除事件监听</button>
        <button onclick="triggerCustomEvent()">触发自定义事件</button>
      </div>
      <div class="result-box" id="event-result"></div>
    </div>
    
    <!-- 元素关系操作 -->
    <div class="section">
      <h2>8. 元素关系操作</h2>
      <div class="demo-area">
        <div id="parent-element">
          <div class="test-element">子元素 1</div>
          <div class="test-element blue" id="sibling-test-element">目标元素</div>
          <div class="test-element green">子元素 3</div>
        </div>
      </div>
      <div class="btn-group">
        <button onclick="getParentElement()">获取父元素</button>
        <button onclick="getChildren()">获取子元素</button>
        <button onclick="getSiblings()">获取兄弟元素</button>
        <button onclick="getPreviousSibling()">获取前一个兄弟元素</button>
        <button onclick="getNextSibling()">获取后一个兄弟元素</button>
      </div>
      <div class="result-box" id="relation-result"></div>
    </div>
    
    <!-- 元素操作 -->
    <div class="section">
      <h2>9. 元素操作</h2>
      <div class="demo-area">
        <div id="element-operation-area">
          <div class="test-element" id="clone-test-element">克隆我</div>
        </div>
      </div>
      <div class="btn-group">
        <button onclick="cloneElement()">克隆元素</button>
        <button onclick="removeChildElement()">移除子元素</button>
        <button onclick="removeElement()">移除自身</button>
      </div>
      <div class="result-box" id="element-operation-result"></div>
    </div>
    
    <!-- 位置和尺寸操作 -->
    <div class="section">
      <h2>10. 位置和尺寸操作</h2>
      <div class="demo-area">
        <div class="test-element" id="position-test-element">位置测试元素</div>
      </div>
      <div class="btn-group">
        <button onclick="getElementPosition()">获取元素位置</button>
        <button onclick="checkVisibility()">检查可视区域</button>
        <button onclick="scrollToElement()">滚动到元素</button>
      </div>
      <div class="result-box" id="position-result"></div>
    </div>
    
    <!-- 焦点操作 -->
    <div class="section">
      <h2>11. 焦点操作</h2>
      <div class="demo-area">
        <input type="text" id="focus-test-input" placeholder="点击按钮聚焦我">
      </div>
      <div class="btn-group">
        <button onclick="focusElement()">聚焦元素</button>
        <button onclick="blurElement()">失焦元素</button>
        <button onclick="checkFocus()">检查焦点</button>
      </div>
      <div class="result-box" id="focus-result"></div>
    </div>
    
    <!-- 数据属性操作 -->
    <div class="section">
      <h2>12. 数据属性操作</h2>
      <div class="demo-area">
        <div class="test-element" id="data-test-element">数据属性测试元素</div>
      </div>
      <div class="btn-group">
        <button onclick="setDataAttribute()">设置数据属性</button>
        <button onclick="getDataAttribute()">获取数据属性</button>
        <button onclick="getAllDataAttributes()">获取所有数据属性</button>
      </div>
      <div class="result-box" id="data-result"></div>
    </div>
    
    <!-- 链式调用示例 -->
    <div class="section">
      <h2>13. 链式调用示例</h2>
      <div class="demo-area">
        <div id="chain-test-area"></div>
      </div>
      <div class="btn-group">
        <button onclick="testChainOperation()">测试链式调用</button>
      </div>
      <div class="result-box" id="chain-result"></div>
    </div>
  </div>

  <script type="module">
    // 导入DOM操作模块
    import DOM操作 from '../../zh/前端/zh-dom.js';
    
    // 将DOM操作暴露到全局作用域
    window.DOM操作 = DOM操作;
    
    // 更新结果显示函数
    function 更新结果(结果ID, 内容) {
      const 结果元素 = document.getElementById(结果ID);
      结果元素.textContent = typeof 内容 === 'object' ? JSON.stringify(内容, null, 2) : String(内容);
    }
    
    // 将更新结果函数暴露到全局
    window.更新结果 = 更新结果;
    
    // 1. 基本选择器操作测试
    function testBasicSelector() {
      const 元素 = DOM操作.查找('#basic-selector-area .blue');
      const 结果 = 元素 ? 元素.获取文本() : '未找到元素';
      更新结果('selector-result', `找到的元素文本: ${结果}`);
    }
    
    function testFindAll() {
      const 元素列表 = DOM操作.查找所有('#basic-selector-area .test-element');
      const 结果 = 元素列表.map(元素 => 元素.获取文本());
      更新结果('selector-result', `找到 ${元素列表.length} 个元素: ${JSON.stringify(结果)}`);
    }
    
    // 2. 元素创建与添加测试
    function createNewElement() {
      const 新元素 = DOM操作.创建元素('div', { 
        class: 'test-element yellow',
        id: 'newly-created',
        style: { fontSize: '16px', padding: '15px' }
      }, '新创建的元素');
      
      const 容器 = DOM操作.查找('#element-creation-area');
      容器.添加子元素(新元素);
      更新结果('creation-result', '成功创建并添加了新元素');
    }
    
    function addChildElement() {
      const 新元素 = DOM操作.创建元素('div', { class: 'test-element green' }, '添加的子元素');
      const 容器 = DOM操作.查找('#element-creation-area');
      容器.添加子元素(新元素);
      更新结果('creation-result', '成功添加子元素');
    }
    
    function insertBeforeElement() {
      const 第一个元素 = DOM操作.查找('#element-creation-area .test-element');
      if (第一个元素) {
        const 新元素 = DOM操作.创建元素('div', { class: 'test-element blue' }, '前面插入的元素');
        const 容器 = DOM操作.查找('#element-creation-area');
        容器.在前面添加子元素(第一个元素, 新元素);
        更新结果('creation-result', '成功在前面插入元素');
      } else {
        更新结果('creation-result', '没有找到参考元素');
      }
    }
    
    // 3. 类操作测试
    function addClassTest() {
      const 元素 = DOM操作.查找('#class-test-element');
      元素.添加类('blue', 'large');
      更新结果('class-result', '添加了类: blue, large');
    }
    
    function removeClassTest() {
      const 元素 = DOM操作.查找('#class-test-element');
      元素.删除类('blue');
      更新结果('class-result', '删除了类: blue');
    }
    
    function toggleClassTest() {
      const 元素 = DOM操作.查找('#class-test-element');
      元素.切换类('hidden');
      更新结果('class-result', '切换了 hidden 类的状态');
    }
    
    function checkClassTest() {
      const 元素 = DOM操作.查找('#class-test-element');
      const 包含Blue = 元素.包含类('blue');
      const 包含Hidden = 元素.包含类('hidden');
      const 包含Large = 元素.包含类('large');
      更新结果('class-result', `类检查结果: blue=${包含Blue}, hidden=${包含Hidden}, large=${包含Large}`);
    }
    
    // 4. 内容操作测试
    function setTextContent() {
      const 内容 = document.getElementById('content-input').value || '默认文本内容';
      const 元素 = DOM操作.查找('#content-test-element');
      元素.设置文本(内容);
      更新结果('content-result', `设置了文本内容: ${内容}`);
    }
    
    function getTextContent() {
      const 元素 = DOM操作.查找('#content-test-element');
      const 内容 = 元素.获取文本();
      更新结果('content-result', `获取的文本内容: ${内容}`);
    }
    
    function setHTMLContent() {
      const 内容 = '<strong>HTML</strong> <em>内容</em> <span style="color: red;">测试</span>';
      const 元素 = DOM操作.查找('#content-test-element');
      元素.设置HTML(内容);
      更新结果('content-result', '设置了HTML内容');
    }
    
    function getHTMLContent() {
      const 元素 = DOM操作.查找('#content-test-element');
      const 内容 = 元素.获取HTML();
      更新结果('content-result', `获取的HTML内容: ${内容}`);
    }
    
    // 5. 属性操作测试
    function setAttributeTest() {
      const 元素 = DOM操作.查找('#attribute-test-element');
      元素.设置属性('title', '这是一个提示');
      更新结果('attribute-result', '设置了title属性');
    }
    
    function getAttributeTest() {
      const 元素 = DOM操作.查找('#attribute-test-element');
      const 标题 = 元素.获取属性('title') || '未设置';
      const 数据测试 = 元素.获取属性('data-test') || '未设置';
      更新结果('attribute-result', `title: ${标题}, data-test: ${数据测试}`);
    }
    
    function removeAttributeTest() {
      const 元素 = DOM操作.查找('#attribute-test-element');
      元素.删除属性('title');
      更新结果('attribute-result', '删除了title属性');
    }
    
    function hasAttributeTest() {
      const 元素 = DOM操作.查找('#attribute-test-element');
      const 有标题 = 元素.有属性('title');
      const 有数据 = 元素.有属性('data-test');
      更新结果('attribute-result', `有title属性: ${有标题}, 有data-test属性: ${有数据}`);
    }
    
    function setMultipleAttributes() {
      const 元素 = DOM操作.查找('#attribute-test-element');
      元素.设置多个属性({
        'data-name': '测试元素',
        'data-value': '123',
        'disabled': 'disabled'
      });
      更新结果('attribute-result', '设置了多个属性');
    }
    
    // 6. 样式操作测试
    function setStyleTest() {
      const 元素 = DOM操作.查找('#style-test-element');
      元素.设置样式('fontSize', '24px');
      更新结果('style-result', '设置了字体大小为24px');
    }
    
    function setMultipleStyles() {
      const 元素 = DOM操作.查找('#style-test-element');
      元素.设置多个样式({
        'backgroundColor': '#9b59b6',
        'color': 'white',
        'padding': '20px',
        'borderRadius': '10px',
        'boxShadow': '0 4px 8px rgba(0,0,0,0.2)'
      });
      更新结果('style-result', '设置了多个样式');
    }
    
    function getStyleTest() {
      const 元素 = DOM操作.查找('#style-test-element');
      const 字体大小 = 元素.获取样式('fontSize');
      const 背景色 = 元素.获取样式('backgroundColor');
      const 颜色 = 元素.获取样式('color');
      更新结果('style-result', `字体大小: ${字体大小}, 背景色: ${背景色}, 颜色: ${颜色}`);
    }
    
    // 7. 事件操作测试
    function 事件处理函数() {
      更新结果('event-result', '点击事件被触发了！');
    }
    
    function addEventListenerTest() {
      const 元素 = DOM操作.查找('#event-test-element');
      元素.事件监听('click', 事件处理函数);
      更新结果('event-result', '添加了点击事件监听');
    }
    
    function removeEventListenerTest() {
      const 元素 = DOM操作.查找('#event-test-element');
      元素.移除事件监听('click', 事件处理函数);
      更新结果('event-result', '移除了点击事件监听');
    }
    
    function 自定义事件处理函数(事件) {
      更新结果('event-result', `自定义事件被触发: ${JSON.stringify(事件.detail)}`);
    }
    
    function triggerCustomEvent() {
      const 元素 = DOM操作.查找('#event-test-element');
      元素.事件监听('customEvent', 自定义事件处理函数);
      元素.触发事件('customEvent', { message: '自定义事件数据', time: new Date().toLocaleString() });
      更新结果('event-result', '触发了自定义事件');
    }
    
    // 8. 元素关系操作测试
    function getParentElement() {
      const 元素 = DOM操作.查找('#sibling-test-element');
      const 父元素 = 元素.获取父元素();
      const 结果 = 父元素 ? `父元素ID: ${父元素.获取属性('id')}` : '没有父元素';
      更新结果('relation-result', 结果);
    }
    
    function getChildren() {
      const 父元素 = DOM操作.查找('#parent-element');
      const 子元素列表 = 父元素.获取子元素();
      const 结果 = 子元素列表.map(元素 => 元素.获取文本());
      更新结果('relation-result', `子元素数量: ${子元素列表.length}, 文本: ${JSON.stringify(结果)}`);
    }
    
    function getSiblings() {
      const 元素 = DOM操作.查找('#sibling-test-element');
      const 兄弟元素列表 = 元素.获取兄弟元素();
      const 结果 = 兄弟元素列表.map(元素 => 元素.获取文本());
      更新结果('relation-result', `兄弟元素数量: ${兄弟元素列表.length}, 文本: ${JSON.stringify(结果)}`);
    }
    
    function getPreviousSibling() {
      const 元素 = DOM操作.查找('#sibling-test-element');
      const 前一个兄弟 = 元素.获取前一个兄弟元素();
      const 结果 = 前一个兄弟 ? `前一个兄弟: ${前一个兄弟.获取文本()}` : '没有前一个兄弟元素';
      更新结果('relation-result', 结果);
    }
    
    function getNextSibling() {
      const 元素 = DOM操作.查找('#sibling-test-element');
      const 后一个兄弟 = 元素.获取后一个兄弟元素();
      const 结果 = 后一个兄弟 ? `后一个兄弟: ${后一个兄弟.获取文本()}` : '没有后一个兄弟元素';
      更新结果('relation-result', 结果);
    }
    
    // 9. 元素操作测试
    function cloneElement() {
      const 原始元素 = DOM操作.查找('#clone-test-element');
      const 克隆元素 = 原始元素.克隆();
      const 容器 = DOM操作.查找('#element-operation-area');
      克隆元素.设置文本('克隆的元素');
      克隆元素.添加类('green');
      容器.添加子元素(克隆元素);
      更新结果('element-operation-result', '成功克隆并添加了元素');
    }
    
    function removeChildElement() {
      const 容器 = DOM操作.查找('#element-operation-area');
      const 要移除的元素 = DOM操作.查找('#clone-test-element');
      if (要移除的元素) {
        容器.移除子元素(要移除的元素);
        更新结果('element-operation-result', '成功移除了子元素');
      } else {
        更新结果('element-operation-result', '没有找到要移除的元素');
      }
    }
    
    function removeElement() {
      const 元素 = DOM操作.查找('#clone-test-element');
      if (元素) {
        元素.移除();
        更新结果('element-operation-result', '成功移除了元素自身');
      } else {
        更新结果('element-operation-result', '没有找到要移除的元素');
      }
    }
    
    // 10. 位置和尺寸操作测试
    function getElementPosition() {
      const 元素 = DOM操作.查找('#position-test-element');
      const 位置 = 元素.获取位置();
      更新结果('position-result', 位置);
    }
    
    function checkVisibility() {
      const 元素 = DOM操作.查找('#position-test-element');
      const 部分可见 = 元素.是否在可视区域();
      const 完全可见 = 元素.是否在可视区域(true);
      更新结果('position-result', `部分可见: ${部分可见}, 完全可见: ${完全可见}`);
    }
    
    function scrollToElement() {
      const 元素 = DOM操作.查找('#position-test-element');
      元素.滚动到({ behavior: 'smooth', block: 'center' });
      更新结果('position-result', '滚动到元素位置');
    }
    
    // 11. 焦点操作测试
    function focusElement() {
      const 元素 = DOM操作.查找('#focus-test-input');
      元素.聚焦();
      更新结果('focus-result', '元素获得了焦点');
    }
    
    function blurElement() {
      const 元素 = DOM操作.查找('#focus-test-input');
      元素.失焦();
      更新结果('focus-result', '元素失去了焦点');
    }
    
    function checkFocus() {
      const 元素 = DOM操作.查找('#focus-test-input');
      const 有焦点 = 元素.有焦点();
      更新结果('focus-result', `元素${有焦点 ? '有' : '没有'}焦点`);
    }
    
    // 12. 数据属性操作测试
    function setDataAttribute() {
      const 元素 = DOM操作.查找('#data-test-element');
      元素.设置数据('name', '测试');
      元素.设置数据('value', '42');
      元素.设置数据('timestamp', Date.now());
      更新结果('data-result', '设置了数据属性');
    }
    
    function getDataAttribute() {
      const 元素 = DOM操作.查找('#data-test-element');
      const 名称 = 元素.获取数据('name');
      const 值 = 元素.获取数据('value');
      更新结果('data-result', `name: ${名称}, value: ${值}`);
    }
    
    function getAllDataAttributes() {
      const 元素 = DOM操作.查找('#data-test-element');
      const 所有数据 = 元素.获取所有数据();
      更新结果('data-result', 所有数据);
    }
    
    // 13. 链式调用测试
    function testChainOperation() {
      const 容器 = DOM操作.查找('#chain-test-area');
      
      // 链式调用示例
      const 新元素 = DOM操作.创建元素('div', { class: 'test-element' })
        .设置文本('链式调用创建的元素')
        .添加类('blue', 'large')
        .设置多个样式({
          fontSize: '18px',
          padding: '20px',
          borderRadius: '8px'
        })
        .设置数据('chain', 'true')
        .事件监听('click', function() {
          alert('链式调用创建的元素被点击了！');
        });
      
      容器.添加子元素(新元素);
      
      // 另一个链式调用示例
      DOM操作.创建元素('div')
        .设置HTML('<strong>链式调用</strong> 真方便！')
        .设置多个样式({
          marginTop: '10px',
          padding: '15px',
          backgroundColor: '#f39c12',
          color: 'white'
        })
        .添加子元素(DOM操作.创建元素('span', {}, ' 附加内容'))
        .事件监听('mouseenter', (function() {
          return function(event) {
            const 元素 = DOM操作.查找(event.currentTarget);
            元素.设置样式('backgroundColor', '#e67e22');
          };
        })())
        .事件监听('mouseleave', (function() {
          return function(event) {
            const 元素 = DOM操作.查找(event.currentTarget);
            元素.设置样式('backgroundColor', '#f39c12');
          };
        })())
        .addTo(容器); // 注意：这里需要在zh-dom.js中添加addTo方法
      
      更新结果('chain-result', '成功进行了链式调用操作');
    }
    
    // 将所有测试函数暴露到全局作用域
    window.testBasicSelector = testBasicSelector;
    window.testFindAll = testFindAll;
    window.createNewElement = createNewElement;
    window.addChildElement = addChildElement;
    window.insertBeforeElement = insertBeforeElement;
    window.addClassTest = addClassTest;
    window.removeClassTest = removeClassTest;
    window.toggleClassTest = toggleClassTest;
    window.checkClassTest = checkClassTest;
    window.setTextContent = setTextContent;
    window.getTextContent = getTextContent;
    window.setHTMLContent = setHTMLContent;
    window.getHTMLContent = getHTMLContent;
    window.setAttributeTest = setAttributeTest;
    window.getAttributeTest = getAttributeTest;
    window.removeAttributeTest = removeAttributeTest;
    window.hasAttributeTest = hasAttributeTest;
    window.setMultipleAttributes = setMultipleAttributes;
    window.setStyleTest = setStyleTest;
    window.setMultipleStyles = setMultipleStyles;
    window.getStyleTest = getStyleTest;
    window.addEventListenerTest = addEventListenerTest;
    window.removeEventListenerTest = removeEventListenerTest;
    window.triggerCustomEvent = triggerCustomEvent;
    window.getParentElement = getParentElement;
    window.getChildren = getChildren;
    window.getSiblings = getSiblings;
    window.getPreviousSibling = getPreviousSibling;
    window.getNextSibling = getNextSibling;
    window.cloneElement = cloneElement;
    window.removeChildElement = removeChildElement;
    window.removeElement = removeElement;
    window.getElementPosition = getElementPosition;
    window.checkVisibility = checkVisibility;
    window.scrollToElement = scrollToElement;
    window.focusElement = focusElement;
    window.blurElement = blurElement;
    window.checkFocus = checkFocus;
    window.setDataAttribute = setDataAttribute;
    window.getDataAttribute = getDataAttribute;
    window.getAllDataAttributes = getAllDataAttributes;
    window.testChainOperation = testChainOperation;
    
    // 事件处理函数也需要暴露到全局
    window.事件处理函数 = 事件处理函数;
    window.自定义事件处理函数 = 自定义事件处理函数;
    
    // 为DOM操作类添加addTo方法以支持链式调用中的添加操作
    DOM操作.prototype.addTo = function(父元素) {
      const 父 = 父元素 instanceof DOM操作 ? 父元素.取值() : 父元素;
      父.appendChild(this.取值());
      return this;
    };
  </script>
</body>
</html>